<template>
  <div class="signature-panel">
    <!-- 指定签署位置 -->
    <div class="position-section">
      <div class="section-header">
        <h3>指定签署位置</h3>
        <span class="section-subtitle">拖拽至事人章可设置签位</span>
        <el-button type="primary" size="small" class="one-key-btn">一键生成</el-button>
      </div>
    </div>

    <!-- 批量操作 -->
    <div class="batch-section">
      <div class="section-header">
        <h4>批量操作</h4>
        <el-icon class="expand-icon"><ArrowDown /></el-icon>
      </div>
      
      <!-- 定位关键字 -->
      <div class="keyword-section">
        <div class="input-group">
          <span class="input-label">定位关键字</span>
          <el-input 
            v-model="positionKeyword" 
            placeholder="请输入定位关键字" 
            size="small"
            class="keyword-input"
          />
          <el-button type="primary" size="small">确定添加</el-button>
        </div>
      </div>

      <!-- 签署显示 -->
      <div class="display-section">
        <div class="display-options">
          <span class="option-label">签署显示</span>
          <div class="checkbox-group">
            <el-checkbox v-model="showSignerName" size="small">显示签署落款</el-checkbox>
            <el-checkbox v-model="showSignDate" size="small">显示签署日期</el-checkbox>
          </div>
        </div>
      </div>

      <!-- 多章排列 -->
      <div class="arrangement-section">
        <div class="arrangement-options">
          <span class="option-label">多章排列</span>
          <el-radio-group v-model="stampArrangement" size="small">
            <el-radio label="horizontal">左右排列</el-radio>
            <el-radio label="vertical">上下排列</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 业务身份选择 -->
    <div class="identity-section">
      <div class="identity-header">
        <el-checkbox v-model="selectAll" @change="handleSelectAll" size="small">全选</el-checkbox>
        <span class="identity-label">业务身份</span>
        <el-select v-model="selectedIdentity" placeholder="全部" size="small" class="identity-select">
          <el-option label="全部" value="all" />
          <el-option label="债权人" value="creditor" />
          <el-option label="抵押人" value="mortgagor" />
          <el-option label="质权人" value="pledgee" />
          <el-option label="贷款人" value="lender" />
        </el-select>
      </div>
    </div>

    <!-- 签署人列表 -->
    <div class="signer-list-section">
      <!-- 债权人、抵押人 -->
      <div class="signer-group">
        <h5>债权人、抵押人：</h5>
        <div class="signer-stamps">
          <div v-for="signer in creditorSigners" :key="signer.id" class="signer-stamp-item">
            <el-checkbox v-model="signer.selected" size="small" />
            <div class="stamp-preview">
              <div :class="['stamp', signer.stampType]">
                <div class="stamp-content">
                  <div class="stamp-star" v-if="signer.stampType === 'star'">★</div>
                  <div class="stamp-text">{{ signer.stampText }}</div>
                  <div class="stamp-date" v-if="signer.showDate">{{ signer.date }}</div>
                </div>
              </div>
            </div>
            <div class="signer-name">{{ signer.name }}</div>
            <div class="signer-company">{{ signer.company }}</div>
            <div class="stamp-actions">
              <el-button size="small" text @click="editStamp(signer.id)">
                <el-icon><Setting /></el-icon>
              </el-button>
              <el-button size="small" text>
                <span>/0</span>
                <el-icon><View /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 质权人、抵押权人 -->
      <div class="signer-group">
        <h5>质权人、抵押权人：</h5>
        <div class="signer-stamps">
          <div v-for="signer in pledgeeSigners" :key="signer.id" class="signer-stamp-item">
            <el-checkbox v-model="signer.selected" size="small" />
            <div class="stamp-preview">
              <div :class="['stamp', signer.stampType]">
                <div class="stamp-content">
                  <div class="stamp-text">{{ signer.stampText }}</div>
                  <div class="stamp-date" v-if="signer.showDate">{{ signer.date }}</div>
                </div>
              </div>
            </div>
            <div class="signer-name">{{ signer.name }}</div>
            <div class="stamp-actions">
              <el-button size="small" text @click="editStamp(signer.id)">
                <el-icon><Setting /></el-icon>
              </el-button>
              <el-button size="small" text>
                <span>/0</span>
                <el-icon><View /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowDown, Setting, View } from '@element-plus/icons-vue'

/**
 * 签署人接口
 */
interface Signer {
  id: string
  name: string
  company?: string
  stampText: string
  stampType: 'star' | 'circle' | 'square'
  showDate: boolean
  date: string
  selected: boolean
  identity: 'creditor' | 'mortgagor' | 'pledgee' | 'lender'
}

// 批量操作相关
const positionKeyword = ref('')
const showSignerName = ref(true)
const showSignDate = ref(true)
const stampArrangement = ref('horizontal')

// 业务身份选择
const selectAll = ref(false)
const selectedIdentity = ref('all')

// 债权人、抵押人列表
const creditorSigners = ref<Signer[]>([
  {
    id: '1',
    name: '罗文健',
    company: '福建建邦建设发展有限公司',
    stampText: '福建建邦建设发展有限公司',
    stampType: 'star',
    showDate: true,
    date: '2025年09月02日',
    selected: false,
    identity: 'creditor'
  },
  {
    id: '2', 
    name: '之张印静',
    stampText: '之张印静',
    stampType: 'circle',
    showDate: false,
    date: '',
    selected: false,
    identity: 'mortgagor'
  }
])

// 质权人、抵押权人列表
const pledgeeSigners = ref<Signer[]>([
  {
    id: '3',
    name: '黑龙2',
    stampText: '黑龙2',
    stampType: 'square',
    showDate: false,
    date: '',
    selected: false,
    identity: 'pledgee'
  }
])

/**
 * 处理全选操作
 * @param checked 是否选中
 */
const handleSelectAll = (checked: boolean) => {
  creditorSigners.value.forEach(signer => {
    signer.selected = checked
  })
  pledgeeSigners.value.forEach(signer => {
    signer.selected = checked
  })
}

/**
 * 编辑印章
 * @param signerId 签署人ID
 */
const editStamp = (signerId: string) => {
  console.log('编辑印章:', signerId)
  // 这里可以打开印章编辑对话框
}

/**
 * 根据业务身份筛选签署人
 */
const filteredSigners = computed(() => {
  if (selectedIdentity.value === 'all') {
    return {
      creditors: creditorSigners.value,
      pledgees: pledgeeSigners.value
    }
  }
  
  return {
    creditors: creditorSigners.value.filter(signer => signer.identity === selectedIdentity.value),
    pledgees: pledgeeSigners.value.filter(signer => signer.identity === selectedIdentity.value)
  }
})

/**
 * 添加定位关键字
 */
const addPositionKeyword = () => {
  if (positionKeyword.value.trim()) {
    console.log('添加定位关键字:', positionKeyword.value)
    // 这里可以实现定位关键字的添加逻辑
    positionKeyword.value = ''
  }
}

/**
 * 一键生成签署位
 */
const generateSignatures = () => {
  console.log('一键生成签署位')
  // 这里可以实现一键生成签署位的逻辑
}
</script>

<style scoped>
.signature-panel {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

/* 指定签署位置 */
.position-section {
  margin-bottom: 16px;
}

.position-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.position-section h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.section-subtitle {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.one-key-btn {
  margin-left: auto;
}

/* 批量操作 */
.batch-section {
  margin-bottom: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.batch-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.batch-section h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.expand-icon {
  color: #909399;
  cursor: pointer;
}

.keyword-section,
.display-section,
.arrangement-section {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.arrangement-section {
  border-bottom: none;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-label,
.option-label {
  font-size: 12px;
  color: #606266;
  white-space: nowrap;
}

.keyword-input {
  flex: 1;
}

.display-options,
.arrangement-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkbox-group {
  display: flex;
  gap: 16px;
}

/* 业务身份选择 */
.identity-section {
  margin-bottom: 16px;
}

.identity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.identity-label {
  font-size: 12px;
  color: #606266;
}

.identity-select {
  width: 80px;
}

/* 签署人列表 */
.signer-list-section {
  flex: 1;
  overflow-y: auto;
}

.signer-group {
  margin-bottom: 16px;
}

.signer-group h5 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #606266;
  font-weight: normal;
}

.signer-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.signer-stamp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  min-width: 80px;
}

.stamp-preview {
  margin: 8px 0;
}

.stamp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ff0000;
  background: white;
  position: relative;
}

.stamp.square {
  border-radius: 4px;
}

.stamp-content {
  text-align: center;
  font-size: 10px;
  color: #ff0000;
  line-height: 1.2;
}

.stamp-star {
  font-size: 16px;
  color: #ff0000;
  margin-bottom: 2px;
}

.stamp-text {
  font-weight: bold;
}

.stamp-date {
  font-size: 8px;
  margin-top: 2px;
}

.signer-name {
  font-size: 12px;
  color: #303133;
  margin-bottom: 2px;
  text-align: center;
}

.signer-company {
  font-size: 10px;
  color: #909399;
  text-align: center;
  margin-bottom: 4px;
}

.stamp-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.stamp-actions .el-button {
  padding: 2px;
  min-height: auto;
}

.stamp-actions span {
  font-size: 10px;
  color: #909399;
}
</style>